<template>
  <div class="box_container">
    <div class="box_banner">
      <img class="box_banner_pc" src="@/assets/home-banner-pc.png" alt="" />
      <img
        class="box_banner_mobile"
        src="@/assets/home-banner-phone.png"
        alt=""
      />
    </div>
    <div
      class="box_content"
      :style="{
        width: settingStore.publicWidth,
      }"
    >
      <!-- 赛事简介 -->
      <div class="box_content_introduction box_content_item">
        <div class="box_content_title">
          <h3>赛事介绍</h3>
          <span></span>
          <h4>EVENT INTRODUCTION</h4>
        </div>
        <div class="box_content_introduction_content">
          <div class="box_content_introduction_content_left">
            <video src=""></video>
            <!-- <img src="@/assets/home-video.png" alt="" /> -->
          </div>
          <div class="box_content_introduction_content_right">
            <div class="introduction_content_right_nav">
              <div
                class="nav_prev"
                @click="handIntroductionNavBtnClick('prev')"
              >
                <ChevronUpIcon />
              </div>
              <div class="nav_center">
                <div
                  v-for="(item, index) in introductionNav"
                  :key="index + 'introduction'"
                  :class="
                    introductionNavActive === index
                      ? 'nav_center_item nav_center_item_active'
                      : 'nav_center_item'
                  "
                  @click="handIntroductionNavClick(item, index)"
                >
                  {{ item.label }}
                </div>
              </div>
              <div
                class="nav_next"
                @click="handIntroductionNavBtnClick('next')"
              >
                <ChevronDownIcon />
              </div>
            </div>
            <div class="introduction_content_right_text">
              <h4>{{ introductionNavActiveItem.label }}</h4>
              <div v-html="introductionNavActiveItem.text"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 新闻公告 -->
      <div class="box_content_news box_content_item">
        <div class="box_content_title">
          <h3>新闻公告</h3>
          <span></span>
          <h4>NEWS ANNOUNCEMENT</h4>
        </div>
        <div class="box_content_news_content">
          <div class="box_content_news_content_item">
            <div class="box_content_news_content_item_header">
              <div class="box_content_news_content_item_header_title">
                <h3>新闻资讯</h3>
                <h4>NEWS AND INFORMATION</h4>
              </div>
              <div class="box_content_news_content_item_header_more">
                <a href="">更多></a>
              </div>
            </div>
            <div class="box_content_news_content_item_content">
              <div
                class="box_content_news_content_item_content_item"
                v-for="(item, index) in newsData"
                :key="index + 'news'"
              >
                <div class="box_content_news_content_item_content_item_title">
                  {{ item.title }}
                </div>
                <div class="box_content_news_content_item_content_item_date">
                  <TimeIcon style="color: #ad2121; font-size: 18px" />
                  <span>{{ item.date }}</span>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="box_content_news_content_item">
            <div class="box_content_news_content_item_header">
              <div class="box_content_news_content_item_header_title">
                <h3>通知公告</h3>
                <h4>Announcement and Notice</h4>
              </div>
              <div class="box_content_news_content_item_header_more">
                <a href="">更多></a>
              </div>
            </div>
            <div class="box_content_news_content_item_content">
              <div
                class="box_content_news_content_item_content_item"
                v-for="(item, index) in noticeData"
                :key="index + 'notice'"
              >
                <div class="box_content_news_content_item_content_item_title">
                  {{ item.title }}
                </div>
                <div class="box_content_news_content_item_content_item_date">
                  <TimeIcon style="color: #ad2121; font-size: 18px" />
                  <span>{{ item.date }}</span>
                </div>
              </div>
            </div>
          </div> -->
        </div>
      </div>
      <div class="box_content_news_mobile box_content_item">
        <div class="box_content_title">
          <h3>新闻资讯</h3>
          <span></span>
          <h4>NEWS AND INFORMATION</h4>
        </div>
        <div class="box_content_news_mobile_content">
          <div
            class="box_content_news_content_item_content_item"
            v-for="(item, index) in newsData"
            :key="index + 'news'"
          >
            <div class="box_content_news_content_item_content_item_title">
              {{ item.title }}
            </div>
            <div class="box_content_news_content_item_content_item_date">
              <div>
                <TimeIcon style="color: #ad2121; font-size: 18px" />
                <span>{{ item.date }}</span>
              </div>
              <a href="">查看详情></a>
            </div>
          </div>
        </div>
        <!-- <div class="box_content_title">
          <h3>通知公告</h3>
          <span></span>
          <h4>Announcement and Notice</h4>
        </div>
        <div class="box_content_news_mobile_content">
          <div
            class="box_content_news_content_item_content_item"
            v-for="(item, index) in noticeData"
            :key="index + 'notice'"
          >
            <div class="box_content_news_content_item_content_item_title">
              {{ item.title }}
            </div>
            <div class="box_content_news_content_item_content_item_date">
              <div>
                <TimeIcon style="color: #ad2121; font-size: 18px" />
                <span>{{ item.date }}</span>
              </div>
              <a href="">查看详情></a>
            </div>
          </div>
        </div> -->
      </div>
      <!-- 合作伙伴 partner -->

      <div class="box_content_partner box_content_item">
        <div class="box_content_title">
          <h3>合作伙伴</h3>
          <span></span>
          <h4>cooperative partner</h4>
        </div>
        <div class="box_content_partner_content">
          <t-swiper
            class="tdesign-demo-block--swiper"
            :navigation="{ size: 'large' }"
            :autoplay="false"
          >
            <t-swiper-item
              v-for="(item, index) in partnerData"
              :key="index + 'partner'"
            >
              <div class="box_content_partner_box">
                <div
                  class="box_content_partner_item"
                  v-for="(itm, idx) in item"
                  :key="index + 'partner' + idx"
                >
                  <div class="box_content_partner_item_img">
                    <img :src="itm.img" alt="" />
                  </div>
                </div>
              </div>
            </t-swiper-item>
          </t-swiper>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import {
  ChevronUpIcon,
  ChevronDownIcon,
  TimeIcon,
} from "tdesign-icons-vue-next";

import { useSettingStore } from "@/store";

const settingStore = useSettingStore();
const introductionNav = ref([
  {
    label: "赛事简介",
    value: 1,
    text: "1111111111",
  },
  {
    label: "使命",
    value: 2,
    text: "2222222",
  },
  {
    label: "愿景",
    value: 3,
    text: "333333",
  },
  {
    label: "价值观",
    value: 4,
    text: "<p>通过发明教育及竞赛活动，激发青少年的科创精神，促进青少年的自我成长，培养具有全球视野和社会责任感的未来创新者。</p><p>打造发明教育生态系统，让一亿青少年有机会通过发明教育，认识自己、认知世界，成为具备二十一世纪核心素养的终身创新者。</p>",
  },
  {
    label: "发展历程",
    value: 5,
    text: "4444444",
  },
]);
const introductionNavActive = ref(3);
const introductionNavActiveItem = ref({
  text: "",
  label: "",
});

const newsData = ref([
  {
    title:
      "2025年4月20日-21日，山西赛区竞赛活动成功举办21日，山西赛区竞赛活动成功举办21日，山西赛区竞赛活动成功举办",
    content: "2021年12月15日",
    date: "2025年4月23日",
  },
  {
    title: "2025年4月20日-21日，山西赛区竞赛活动成功举办",
    content: "2021年12月15日",
    date: "2025年4月23日",
  },
  {
    title: "2025年4月20日-21日，山西赛区竞赛活动成功举办",
    content: "2021年12月15日",
    date: "2025年4月23日",
  },
]);
const noticeData = ref([
  {
    title:
      "2025年4月20日-21日，山西赛区竞赛活动成功举办21日，山西赛区竞赛活动成功举办21日，山西赛区竞赛活动成功举办",
    content: "2021年12月15日",
    date: "2025年4月23日",
  },
  {
    title: "2025年4月20日-21日，山西赛区竞赛活动成功举办",
    content: "2021年12月15日",
    date: "2025年4月23日",
  },
  {
    title: "2025年4月20日-21日，山西赛区竞赛活动成功举办",
    content: "2021年12月15日",
    date: "2025年4月23日",
  },
]);
const partnerData = ref([
  [
    {
      name: "大同大学",
      img: new URL("@/assets/datong.png", import.meta.url).href,
    },
    {
      name: "大同大学",
      img: new URL("@/assets/datong.png", import.meta.url).href,
    },
    {
      name: "大同大学",
      img: new URL("@/assets/datong.png", import.meta.url).href,
    },
    {
      name: "大同大学",
      img: new URL("@/assets/datong.png", import.meta.url).href,
    },
    {
      name: "大同大学",
      img: new URL("@/assets/datong.png", import.meta.url).href,
    },
    {
      name: "大同大学",
      img: new URL("@/assets/datong.png", import.meta.url).href,
    },
    {
      name: "大同大学",
      img: new URL("@/assets/datong.png", import.meta.url).href,
    },
    {
      name: "大同大学",
      img: new URL("@/assets/datong.png", import.meta.url).href,
    },
    {
      name: "大同大学",
      img: new URL("@/assets/datong.png", import.meta.url).href,
    },
    {
      name: "大同大学",
      img: new URL("@/assets/datong.png", import.meta.url).href,
    },
    {
      name: "大同大学",
      img: new URL("@/assets/datong.png", import.meta.url).href,
    },
    {
      name: "大同大学",
      img: new URL("@/assets/datong.png", import.meta.url).href,
    },
    {
      name: "大同大学",
      img: new URL("@/assets/datong.png", import.meta.url).href,
    },
  ],
  [
    {
      name: "大同大学",
      img: new URL("@/assets/datong.png", import.meta.url).href,
    },
    {
      name: "大同大学",
      img: new URL("@/assets/datong.png", import.meta.url).href,
    },
    {
      name: "大同大学",
      img: new URL("@/assets/datong.png", import.meta.url).href,
    },
    {
      name: "大同大学",
      img: new URL("@/assets/datong.png", import.meta.url).href,
    },
    {
      name: "大同大学",
      img: new URL("@/assets/datong.png", import.meta.url).href,
    },
    {
      name: "大同大学",
      img: new URL("@/assets/datong.png", import.meta.url).href,
    },
    {
      name: "大同大学",
      img: new URL("@/assets/datong.png", import.meta.url).href,
    },
    {
      name: "大同大学",
      img: new URL("@/assets/datong.png", import.meta.url).href,
    },
    {
      name: "大同大学",
      img: new URL("@/assets/datong.png", import.meta.url).href,
    },
    {
      name: "大同大学",
      img: new URL("@/assets/datong.png", import.meta.url).href,
    },
    {
      name: "大同大学",
      img: new URL("@/assets/datong.png", import.meta.url).href,
    },
    {
      name: "大同大学",
      img: new URL("@/assets/datong.png", import.meta.url).href,
    },
    {
      name: "大同大学",
      img: new URL("@/assets/datong.png", import.meta.url).href,
    },
  ],
]);
onMounted(() => {
  introductionNavActiveItem.value =
    introductionNav.value[introductionNavActive.value];
});
const handIntroductionNavClick = (item: any, index: number) => {
  introductionNavActive.value = index;
  introductionNavActiveItem.value = item;
};
const handIntroductionNavBtnClick = (type: string) => {
  if (type === "prev") {
    if (introductionNavActive.value === 0) {
      return;
    }
    introductionNavActive.value--;
    introductionNavActiveItem.value =
      introductionNav.value[introductionNavActive.value];
  } else {
    if (introductionNavActive.value === introductionNav.value.length - 1) {
      return;
    }
    introductionNavActive.value++;
    introductionNavActiveItem.value =
      introductionNav.value[introductionNavActive.value];
  }
};
</script>

<style lang="less" scoped>
.box_container {
  width: 100%;
  height: 100%;
  background: #fff;
  .box_banner {
    width: 100%;
    height: 440px;
    img {
      width: 100%;
      height: 100%;
    }
    .box_banner_pc {
      display: block;
    }
    .box_banner_mobile {
      display: none;
    }
  }
  .box_content {
    margin: 72px auto;
    .box_content_title {
      text-align: center;
      margin: 48px 0;
      h3 {
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 20px;
        color: #ad2121;
      }
      span {
        display: inline-block;
        width: 20px;
        height: 2px;
        background: #666666;
        border-radius: 1px;
      }
      h4 {
        font-family: Microsoft YaHei;
        font-weight: 300;
        font-size: 14px;
        color: #666666;
        text-transform: uppercase;
      }
    }
    .box_content_item {
      width: 100%;
      display: flex;
      flex-direction: column;
      display: block;
    }
    .box_content_news_mobile {
      display: none;
    }
    .box_content_introduction_content {
      height: 430px;
      display: flex;
      align-items: center;
      justify-content: center;
      .box_content_introduction_content_left {
        width: 703px;
        height: 100%;
        background: url("@/assets/home-introduction.png") no-repeat center;
        background-size: 100% 100%;
        video {
          width: 100%;
          height: 100%;
        }
      }
      .box_content_introduction_content_right {
        width: calc(100% - 703px);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .introduction_content_right_nav {
          width: 220px;
          height: 100%;
          background: #333333;
          text-align: center;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: space-between;
          .nav_prev,
          .nav_next {
            font-size: 28px;
            color: #fff;
            opacity: 0.45;
            cursor: pointer;
            margin: 15px;
          }
          .nav_center {
            width: 100%;
            height: calc(100% - 100px);
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: space-between;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #ffffff;
            .nav_center_item {
              width: 100%;
              padding: 20px;
              background-color: transparent;
              cursor: pointer;
            }
            .nav_center_item_active {
              background-color: #ad2121;
            }
          }
        }
        .introduction_content_right_text {
          width: calc(100% - 220px);
          height: 100%;
          background: #ffffff;
          box-shadow: 0px 0px 11px 0px rgba(50, 50, 50, 0.2);
          padding: 60px 20px;
          h4 {
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 16px;
            color: #ad2121;
            margin-bottom: 18px;
          }
          :deep(p) {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            line-height: 28px;
            color: #333333;
            text-indent: 2em;
          }
        }
      }
    }
    .box_content_news_content {
      height: 320px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .box_content_news_content_item {
        // width: calc(50% - 10px);
        width: 100%;
        height: 100%;
        background: #ffffff;
        box-shadow: 0px 0px 11px 0px rgba(50, 50, 50, 0.2);
        border-radius: 10px;
        .box_content_news_content_item_header {
          width: 100%;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 20px;
          border-bottom: 1px solid #e3e3e3;
          .box_content_news_content_item_header_title {
            display: flex;
            align-items: flex-end;
            h3 {
              margin-right: 10px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              font-size: 18px;
              line-height: 18px;
              color: #ad2121;
            }
            h4 {
              font-family: Microsoft YaHei;
              font-weight: 300;
              font-size: 14px;
              line-height: 10px;
              color: #666666;
              text-transform: uppercase;
            }
          }
          .box_content_news_content_item_header_more {
            a {
              font-family: Microsoft YaHei;
              font-weight: bold;
              font-size: 14px;
              color: #ad2121;
            }
          }
        }
        .box_content_news_content_item_content {
          width: 100%;
          height: calc(100% - 50px);
          overflow-y: auto;
          padding: 20px;
          .box_content_news_content_item_content_item {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #666666;
            margin-bottom: 20px;
            .box_content_news_content_item_content_item_title {
              width: calc(100% - 150px);
              white-space: nowrap; /* 强制文本不换行 */
              overflow: hidden; /* 隐藏溢出内容 */
              text-overflow: ellipsis; /* 显示省略号 */
            }
            .box_content_news_content_item_content_item_date {
              font-size: 12px;
              display: flex;
              align-items: center;
              span {
                margin-left: 10px;
              }
            }
          }
          .box_content_news_content_item_content_item:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
    .box_content_partner_content {
      height: 408px;
      :deep(.t-swiper) {
        width: 100%;
        height: 100%;
        .t-swiper__content {
          height: 100%;
        }
        .t-swiper__navigation {
          display: none;
        }
        .t-swiper__arrow-left,
        .t-swiper__arrow-right {
          color: #000;
          width: 50px;
          height: 50px;
          .t-icon {
            width: 50px;
            height: 50px;
          }
        }
        .t-swiper__arrow-left {
          left: 0;
        }
        .t-swiper__arrow-right {
          right: 0;
        }
        .box_content_partner_box {
          width: calc(100% - 100px);
          height: 100%;
          margin: 0 auto;
          box-sizing: border-box;
          display: flex;
          flex-wrap: wrap;
          .box_content_partner_item {
            width: calc(100% / 5);
            height: 124px;
            padding: 10px;
            // opacity: 0.03;
            .box_content_partner_item_img {
              width: 100%;
              height: 100%;
              background: rgba(0, 0, 0, 0.03);
              img {
                width: 100%;
                height: 100%;
                opacity: 0.93;
              }
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 750px) {
  .box_container {
    .box_banner {
      width: 100%;
      height: 440px;
      .box_banner_pc {
        display: none;
      }
      .box_banner_mobile {
        display: block;
      }
    }
    .box_content {
      width: 100% !important;
      .box_content_introduction_content {
        flex-direction: column;
        height: auto;
        .box_content_introduction_content_left {
          width: 100%;
          height: 323px;
        }
        .box_content_introduction_content_right {
          width: 100%;
        }
      }
      .box_content_news {
        display: none;
      }
      .box_content_news_mobile {
        display: block;
      }
      .box_content_news_mobile_content {
        width: 100%;
        // height: 629px;
        background: #ffffff;
        box-shadow: 0px 0px 11px 0px rgba(50, 50, 50, 0.2);
        padding: 20px;
        .box_content_news_content_item_content_item {
          width: 100%;
          padding: 25px 0;
          border-bottom: 1px solid #e3e3e3;
          .box_content_news_content_item_content_item_title {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 24px;
            line-height: 30px;
            color: #666666;
            white-space: nowrap; /* 强制文本不换行 */
            overflow: hidden; /* 隐藏溢出内容 */
            text-overflow: ellipsis; /* 显示省略号 */
          }
          .box_content_news_content_item_content_item_date {
            margin-top: 24px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 20px;
            color: #666666;
            display: flex;
            align-items: center;
            justify-content: space-between;
            a {
              font-family: Microsoft YaHei;
              font-weight: bold;
              font-size: 20px;
              color: #ad2121;
            }
            > div {
              display: flex;
              align-items: center;
              span {
                margin-left: 8px;
              }
            }
          }
        }
        .box_content_news_content_item_content_item:last-child {
          border-bottom: 0;
        }
      }

      .box_content_partner_content {
        height: 408px;
        :deep(.t-swiper) {
          width: 100%;
          height: 100%;
          .t-swiper__content {
            height: 100%;
          }
          .t-swiper__navigation {
            display: none;
          }
          .t-swiper__arrow-left,
          .t-swiper__arrow-right {
            color: #000;
            width: 50px;
            height: 50px;
            .t-icon {
              width: 50px;
              height: 50px;
            }
          }
          .t-swiper__arrow-left {
            left: 0;
          }
          .t-swiper__arrow-right {
            right: 0;
          }
          .box_content_partner_box {
            width: calc(100% - 100px);
            height: 100%;
            margin: 0 auto;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            overflow-y: auto;
            .box_content_partner_item {
              width: calc(100% / 2);
              height: 124px;
              padding: 10px;
              // opacity: 0.03;
              .box_content_partner_item_img {
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.03);
                img {
                  width: 100%;
                  height: 100%;
                  opacity: 0.93;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
